<template>
	<div class="buzzContent">
		<div v-if="item.isblog" class="blogHtml">
			<div class="blogTitle" @click.prevent="toDetail(item)">
				<el-badge value="blog" type="warning" class="item">
					{{ item.title ? item.title : 'without title' }}
				</el-badge>
			</div>
			<mavon-editor
				:editable="false"
				codeStyle="markdown"
				:toolbarsFlag="false"
				:subfield="false"
				defaultOpen="preview"
				ref="md"
				:scrollStyle="true"
				:ishljs="true"
				v-model="blogContentSummary"
				@imgClick.stop="handleImageClick"
				:language="$i18n.locale == 'en_US' ? 'en' : 'zh-CN'"
			/>
		</div>
		<div
			v-else
			class="buzzHtml"
			:class="screenWidth > 768 ? 'webWidthBuzzHtml' : 'h5WidthBuzzHtml'"
			style="cursor: pointer"
			@click="toDetail(item)"
			v-html="item.summary?.replace(/\n/g, '<br/>')"
		></div>

		<div class="buzzImgList">
			<el-image
				v-for="attachmentsUrl in attachmentsUrls"
				:key="attachmentsUrl"
				class="buzzImgItem"
				style="width: 200px; height: 200px"
				:src="attachmentsUrl"
				:preview-src-list="attachmentsUrls"
			>
			</el-image>
		</div>

		<div class="item_operation" v-if="item.metaidInfo">
			<div class="item_operation_user" @click="goUserHome(item)">
				<div
					class="avatarWrap"
					style="height: 50px; width: 50px; margin-right: 5px"
				>
					<img
						v-if="item.metaidInfo.avatar"
						class="avatar"
						:src="
							`${manHost}${item.metaidInfo.avatar}?timestamp=` +
							new Date().getTime()
						"
						alt=""
					/>
					<img v-else class="avatar" :src="defaultUserUrl" alt="" />

					<img
						src=""
						class="mask"
					/>
				</div>
				<div>
					<p
						class="username"
						:class="screenWidth > 768 ? 'webWidthUsername' : 'h5WidthUsername'"
						:title="item.metaidInfo.name"
					>
						{{ item.metaidInfo.name }}
					</p>
					<p class="buzztime">
						{{ $common.formatTimestamp(item.timestamp * 1000, '-') }}
					</p>
				</div>
			</div>
			<div class="Interactive">
				<div class="operationItem" style="cursor: pointer">
					<el-tooltip
						class="item"
						style="padding-left: 10px"
						effect="light"
						:content="$t('buzz_001')"
						placement="top"
					>
						<i
							@click="commontBuzz(item)"
							:class="
								item.commentCount == 0
									? 'el-icon-chat-round'
									: 'el-icon-chat-dot-round'
							"
							style="color: #409eff"
							>{{ item.commentCount > 0 ? item.commentCount : '' }}</i
						>
					</el-tooltip>
					<el-tooltip
						class="item"
						effect="light"
						:content="$t('buzz_002')"
						placement="top"
					>
						<i
							@click="likeBuzz(item)"
							class="el-icon-star-off"
							:class="{ 'el-icon-star-on': item.likeCount > 0 }"
							style="color: #409eff"
							>{{ item.likeCount }}
						</i>
					</el-tooltip>

					<el-tooltip
						class="item"
						effect="light"
						:content="$t('buzz_003')"
						placement="top"
					>
						<i
							@click="forwardBuzz(item)"
							class="el-icon-position"
							style="color: #409eff"
						></i>
					</el-tooltip>
					<el-tooltip
						class="item"
						effect="light"
						:content="$t('components_file_box_contextmenu_box_88')"
						placement="top"
					>
						<i
							class="el-icon-connection"
							@click="viewTx(item)"
							style="color: #409eff"
						></i>
					</el-tooltip>
				</div>
			</div>
		</div>

		<NewBuzzDialog
			:visible.sync="showNewBuzzDialog"
			@newBuzzSuccess="newBuzzSuccess"
			:isPayComment.sync="isPayComment"
			:isPayForward.sync="isPayForward"
			:quotePin="item"
		/>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import NewBuzzDialog from './dialogs/newBuzzDialog'
//import MarkdownIt from 'markdown-it'

export default {
	name: 'BuzzItem',
	props: {
		// 文件类型
		item: {
			required: true,
			type: Object
		},
		isQuote: {
			required: false,
			default: false,
			type: Boolean
		},
		isComment: {
			required: false,
			default: false,
			type: Boolean
		},
		isDetail: {
			required: false,
			default: false,
			type: Boolean
		}
	},
	components: { NewBuzzDialog },
	data() {
		return {
			sureBtnLoading: false,
			showNewBuzzDialog: false,
			isPayComment: false,
			isPayForward: false,
			defaultUserUrl: require('_a/images/common/default_user.png'),
			network: 'mainet'
		}
	},
	async created() {
		this.network = (await window.metaidwallet.getNetwork()).network
	},
	async mounted() {},
	computed: {
		...mapGetters([
			'isLogin',
			'username',
			'userConfig',
			'metaId',
			'currentWallet'
		]),
		// 屏幕宽度
		screenWidth() {
			return this.$store.state.common.screenWidth
		},
		manHost() {
			if ('testnet' == this.network) {
				return 'https://man-test.metaid.io'
			}
			return 'https://man.metaid.io'
		},
		attachmentsUrls() {
			let urls = []
			if (this.item.attachmentsPids) {
				this.item.attachmentsPids.forEach((i) => {
					const url = this.manHost + `/content/${i}`
					urls.push(url)
				})
			}
			return urls
		},
		blogContentSummary: {
			get() {
				// 假设 this.manHost 是一个已定义的变量
				const manHost = this.manHost

				// 定义正则表达式，匹配以 metafile:// 开头的字符串
				const regex = /metafile:\/\/([a-fA-F0-9]{64}i0)/g

				// 替换 this.item.summary 中的所有匹配项
				const metafileWithContent = this.item.summary.replace(
					regex,
					`${manHost}/content/$1`
				)

				//![640.jpg](metafile://4d91ea9f85a810c09269d625f3b5e07e4b6e4ff0f089a057bc611afcccd848e8i0)\

				/**
const md = new MarkdownIt({ breaks: false }).use(
  require('markdown-it-multimd-table')
)
return md.render(metafileWithContent)
*/
				return metafileWithContent
			},
			set() {}
		}

		/**
		blogContentHtml() {
			const md = new MarkdownIt({ breaks: false }).use(
				require('markdown-it-multimd-table')
			)
			return md.render(this.blogContentSummary)
		}
    */
	},
	methods: {
		newBuzzSuccess() {
			this.$emit('resetQuery')
		},
		// 点赞
		async likeBuzz(item) {
			if (!this.isLogin) {
				this.$message.success(this.$t('views_login_1'))
				return
			}
			const res = await window.$walletUtils.payLike(item.id)
			if (res) {
				this.$emit('resetQuery')
				this.$message.success(this.$t('csp_026'))
			}
		},
		// 评论
		commontBuzz() {
			if (!this.isLogin) {
				this.$message.success(this.$t('views_login_1'))
				return
			}
			this.isPayForward = false
			this.isPayComment = true
			this.showNewBuzzDialog = true
		},
		forwardBuzz() {
			if (!this.isLogin) {
				this.$message.success(this.$t('views_login_1'))
				return
			}
			this.isPayForward = true
			this.isPayComment = false
			this.showNewBuzzDialog = true
		},
		// 查看交易
		viewTx(item) {
			const url = `https://www.mvcscan.space/tx/${item.txid}`
			window.open(url, '_blank')
		},
		handleImageClick(src, alt, event) {
			// 这里可以实现你的图片点击逻辑，例如打开新窗口显示图片
			event.preventDefault() // 阻止默认行为
			const imgWindow = window.open(src, '_blank')
			imgWindow.focus()
		},
		toDetail(item) {
			if (item.isblog && this.isDetail) {
				//return
			}
			this.$router.push({ path: '/' + item.id })
		},
		goUserHome(item) {
			this.$router.push({ path: '/user/' + item.address })
		}
	}
}
</script>
<style lang="stylus" scoped>

.buzzContent{

  .showBack{

    margin-bottom: .1rem;
  }
  .blogHtml{
    width:auto;
    padding-right: 0.5rem;
  }
  .blogTitle{
    cursor: pointer;
    margin-left: 10px;
    padding: 1rem;
    font-size: 24px;
    .item {
      margin-top: 10px;
      margin-right: 40px;
      color: #005da6;
      white-space: pre-wrap;
    }
    span{
      padding-left:0.5rem;
    }
  }
  .recent-post-desc{
    font-size: 15px;
    line-height: 1.7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .buzzHtml {
    width:auto;
    margin: 1rem 1.2rem;
    text-overflow: ellipsis;
    font-size:16px;

  }
  .h5WidthBuzzHtml{
    max-width: 20rem;
  }

  .buzzImgList {
    margin-left: 10px;
    padding-left: 1.5rem;
    display: flex;
    flex-wrap: wrap;
   .buzzImgItem {
      width: 200px;
      height: 200px;
      margin-right: 10px;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .item_operation {
    display: flex;
    align-items: center;
    justify-content:  space-between;
    border-top: 1px solid rgba(237,239,242,.27058823529411763);
    margin-top: 0.9rem;
    .item_operation_user{
      display: flex;
      cursor: pointer;
      .avatarWrap {
        position: relative;
        .avatar{
          width: 100%;
          height: 100%;
          display: block;
        }
        .mask{
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .username{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .webWidthUsername{
        max-width:30rem;
      }
      .h5WidthUsername{
        max-width:10rem;
      }
      .buzztime{
        font-size: 12px;
      }
    }
    .Interactive{
      display: flex;

      padding-left: .2rem;
      .operationItem {
        display: flex;
        margin-left: .6rem;


        .el-icon-download-price {
          font-size: 12px;
        }

        .item {
          padding-left: .8rem;
          height: 100%;
          width: 35px;
        }
        .item_operation_text {
          font-size: 13px;

        }
      }
    }
  }
}
</style>
